<template>
  <div class="header">
      <div class="header-L">
          <el-button  icon="el-icon-s-platform" size="mini" class="icon"></el-button>
          <span>P C</span>
          <el-button type="primary" icon="el-icon-thumb" size="mini" class="regFrom" @click="regFrom()">教师注册表</el-button>
           <el-button type="primary" icon="el-icon-mobile-phone" size="mini" class="regFrom" @click="teacherLogin()">教师登录</el-button>
          <el-button type="primary" icon="el-icon-tickets" size="mini" class="nowCourseBut" @click="nowCourseBut">当天课程屏幕</el-button>
          <el-button type="primary" icon="el-icon-s-order" size="mini" class="weekCourseBut" @click="weekCourseBut">实验室课表</el-button>
      </div>

      <div class="header-R">
          <el-dropdown trigger="click" size="mini"  @command="handleCommand">
             <span>
                 <img :src="imgUrl" class="userImg">
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>个人中心</el-dropdown-item>
               <el-dropdown-item command="退出">退出</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
      </div>
  </div>
</template>

<script>
export default {
     data(){
         return{
            imgUrl:require('../assets/img/userimg.jpeg')
         }
     },
     methods: {
        handleCommand(command) {
       if(command=="退出"){
           this.$router.push("/").catch((err)=>{})
       }
      },

      regFrom(){//注册表
          this.$router.push('/regfrom').catch((err)=>{})
      },
      nowCourseBut(){//当天课程屏幕
         this.$router.push('/showcourse').catch((err)=>{})
      },
      weekCourseBut(){
           this.$router.push('/showweekcourse').catch((err)=>{})
      },
      teacherLogin(){
          this.$router.push('/teacherLogin').catch((err)=>{})
      }
     }
}
</script>

<style scoped>
.header{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-L{
     display: flex;
     align-items: center;
}
.header-R{
     display: flex;
     align-items: center;
}
.header-L span{
    margin-left: 20px;
    font-size: 14px;
    color: #FAEBD7;


    font-weight: 600;
}
.header .header-R .userImg{
      width: 40PX;
      height: 40PX;
      border-radius: 50%;
      border: 1px solid rgb(119, 118, 118);
      margin-right: 10px;
      margin-top:5px ;
}
.header .header-R .userImg:hover{
     border: 2px solid rgb(77, 77, 77);
}
.icon{
    font-size: 22px;
    padding: 6px;
}

.regFrom{
  margin-left: 20px;
}
.nowCourseBut{
  margin-left: 20px;
}
.weekCourseBut{
    margin-left: 20px;
}

</style>